<template>
	<view class="container">
		<view class="steps">
			<!-- (1交易中，2交易成功，3交易失败，4卖家确认，5买家确认，6卖家取消，7买家取消) -->
			<u-steps 
				v-if="orderInfo.status == 1 || orderInfo.status == 2 || orderInfo.status == 4 ||orderInfo.status == 5" 
				class="steps" 
				mode="number" 
				:list="stepList"
				:current="current"></u-steps>
			<view v-else class="remark">
				<text>{{remark}}</text>
			</view>
		</view>
		
		<view class="goods" @click="goGoodsDetail(orderInfo.goodsId)">
			<image mode="aspectFill" :src="orderInfo.pic"></image>
			<view class="content">
				<view class="name">
					<text>{{orderInfo.goodsName}}</text>
				</view>
				<view class="price">
					<text>￥{{orderInfo.price}}</text>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="send">
			<view class="title">
				<text>交易方式：</text>
				<u-tag shape="square" :text="orderInfo.sendType == 1 ? '自取':'包送'" mode="dark" bg-color="#007aff" />
			</view>
			<view class="content">
				<text>交易地址：{{orderInfo.address}}</text>
			</view>
		</view>
		<view class="line"></view>
		<view class="order">
			<view class="title">
				<text>订单信息</text>
			</view>
			<view class="content">
				<text>卖家昵称：{{orderInfo.sellerNickName}}</text>
				<view class="order-code">
					<text>
						订单编号：{{orderInfo.orderCode}} 
					</text>
					<u-button size="mini" shape="circle" @click="copy(orderInfo.orderCode)">复制</u-button>
				</view>
				<text>交易时间：{{orderInfo.createTime}}</text>
			</view>
		</view>
		
		<view class="bottom">
			<u-button 
				v-if="orderInfo.status == 1" 
				:custom-style="customStyle" 
				type="error" 
				shape="circle" 
				size="medium"
				@click="cancel(orderInfo.orderId)">取消订单</u-button>
			<u-button 
				v-if="orderInfo.status == 1" 
				:custom-style="customStyle" 
				type="primary" 
				shape="circle" 
				size="medium"
				@click="confirm(orderInfo.orderId)">交易完成</u-button>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { constant } from '@/utils/constant.js'
	
	import {
		getOrderInfo,orderCancel,orderConfirm
	} from "@/api/order.js";
	import {
		getDicts
	} from "@/api/dict-data.js";
	export default {
		data() {
			return {
				stepList: [{
					name: '已拍下',
				},{
					name: '卖家确认',
				},{
					name: '买家确认',
				},{
					name: '交易成功'
				}],
				current: 0,
				orderInfo: {},
				remark: '',
				orderStatusList: [],
				customStyle: {
					width: '330rpx'
				}
			}
		},
		methods: {
			// 导航到商品详情页
			goGoodsDetail(goodsId) {
				this.$u.route('/pages/goods-detail/goods-detail', {
					goodsId: goodsId
				});
			},
			// 获取订单详细信息
			async getOrderDetailInfo(orderId) {
				await getOrderInfo(orderId).then(res => {
					console.log(res)
					this.orderInfo = res.data
					// (1交易中，2交易成功，3交易失败，4卖家确认，5买家确认，6卖家取消，7买家取消)
					if(this.orderInfo.status == 1) {
						this.current = 0
					} else if(this.orderInfo.status == 4) {
						this.current = 1
					} else if(this.orderInfo.status == 5) {
						this.current = 2
					} else if(this.orderInfo.status == 2) {
						this.current = 3
					}
				})
				
				// 查询字典：商品收取类型
				await getDicts('hy_deal_order_status').then(res => {
					this.orderStatusList = res.data
				})
				for( let status of this.orderStatusList){
					if (status.dictValue == this.orderInfo.status) {
						this.remark = status.dictLabel
						console.log(this.remark)
					}
				}
			},
			// 复制订单编号到截切版
			copy(orderCode){
				uni.setClipboardData({
				    data: orderCode
				});
			},
			// 取消订单
			cancel(orderId) {
				uni.showModal({
					title: '温馨提示',
					content: "确定取消该订单吗？",
					success: (res) => {
						if (res.confirm) {
							orderCancel(orderId).then(res => {
								this.getOrderDetailInfo(orderId)
								this.$refs.uToast.show({
									title: '订单已取消',
									type: 'success'
								})
							})
						}
					}
				})
			},
			// 确认订单
			confirm(orderId){
				uni.showModal({
					title: '温馨提示',
					content: "确认交易完成了吗？",
					success: (res) => {
						if (res.confirm) {
							orderConfirm(orderId).then(res => {
								this.getOrderDetailInfo(orderId)
								this.$refs.uToast.show({
									title: '订单已确认',
									type: 'success'
								})
							})
						}
					}
				})
			}
		},
		onLoad(options) {
			this.getOrderDetailInfo(options.orderId)
		}
	}
</script>

<style lang="scss" scoped>
	@import "./order-detail.scss";
</style>
